
<template>
  <div class="task-look-main">
    <!-- shop msg -->
    <div class="task-shop-msg">
      <div class="shop-msg-box" v-if="data.shopName">
        <div class="shop-msg-title">{{data.shopName}}</div>
        <div class="shop-msg-img">
          <div class="msg-img">
            <!--<a :href="data.goodsurl">-->
              <i-m-g-scale :imgSrc="imgUrl(data.goodsmainimg)" @click.native.stop></i-m-g-scale>
              <!--<img :src="" alt="" title=""/>-->
            <!--</a>-->
          </div>
          <div class="msg-money">
						<span>
							<a>搜索展示价格:</a>
							<a>{{data.searchprice}}元</a>
						</span>
            <span>
							<a>商品成交价格:</a>
							<a>{{data.factprice}}元</a>
						</span>
            <span>
							<a>规格数量:</a>
							<a>{{data.number}}</a>
						</span>
          </div>
        </div>
      </div>
      <!-- 任务状态 -->
      <div class="task-state">
        <div class="task-state-box">
          <div class="shop-msg-box">
						<span>
							<a><img src="static/imgs/a.png" alt="" title=""/></a>
							<a>任务状态</a>
						</span>
            <span>{{typeString}}</span>
          </div>
        </div>
        <div class="task-hint">
          <div class="shop-msg-box">温馨提示:24小时内商家未返款的，平台将自动返款!</div>
        </div>
      </div>
      <!-- 任务步骤 -->
      <div class="task-step">
        <div class="task-step-auto">
          <!-- 1 -->
          <div class="task-step-box">
            <div class="border-color">1</div>
            <div class="task-step-new-left">

            </div>
            <div class="task-step-right">
              <div class="task-step-t">
								<span>
									<a>接受任务</a>
								</span>
                <span>
									<a>{{data.receiveDate}}</a>
								</span>
              </div>
              <div class="task-step-l">
                <ul >
                  <li>
                    <a>任务编号</a>
                    <a>{{data.code}}</a>
                  </li>
                  <li v-if="data.buyerSubmit">
                    <a>淘宝订单编号</a>
                    <a>{{data.buyerSubmit.orderid}}</a>
                  </li>
                  <li>
                    <a>买家号</a>
                    <a>{{data.acount}}</a>
                  </li>

                  <li>
                    <a>垫付金额</a>
                    <a>{{data.searchprice}}</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!-- 2 -->
          <div class="task-step-box"  :class="step<2?'no-step':''">
            <div class="border-color">2</div>
            <div class="task-step-new-left">

            </div>
            <div class="task-step-right">
              <div class="task-step-t">
								<span>
									<a> {{mainType==='pay'?'订单付款':'浏览行为'}}</a>
								</span>
              </div>
              <div class="task-step-l">
                <div class="task-step-Two">
                  <div class="step-Two-left">货比三家</div>
                  <div class="step-Two-right">
										<span v-if="data.buyerSubmit">
											<img :src="imgUrl(data.buyerSubmit.result)" alt="" title=""/>
										</span>
                    <span v-if="data.buyerSubmit">
											<img :src="imgUrl(data.buyerSubmit.goods1)" alt="" title=""/>
										</span>
                    <span v-if="data.buyerSubmit">
											<img :src="imgUrl(data.buyerSubmit.goods2)" alt="" title=""/>
										</span>
                  </div>
                </div>
                <div class="task-step-Two">
                  <div class="step-Two-left">浏览店铺</div>
                  <div class="step-Two-right">
										<span v-if="data.buyerSubmit">
											<img :src="imgUrl(data.buyerSubmit.head)"alt="" title=""/>
										</span>
                    <span v-if="data.buyerSubmit">
											<img :src="imgUrl(mainType==='pay'?data.buyerSubmit.ask:data.buyerSubmit.bottom)" alt="" title=""/>
										</span>
                    <span v-if="data.buyerSubmit">
											<img :src="imgUrl(mainType==='pay'?data.buyerSubmit.detail:data.buyerSubmit.shopgoods1)" alt="" title=""/>
										</span>
                    <span v-if="data.buyerSubmit">
											<img :src="imgUrl(mainType==='pay'?data.buyerSubmit.cart:data.buyerSubmit.shopgoods2)" alt="" title=""/>
										</span>

                  </div>
                </div>
                <div class="task-step-Two">
                  <div class="step-Two-left">{{mainType==='pay'?'下单支付':'关注商品'}}</div>
                  <div class="step-Two-right">
										<span v-if="data.buyerSubmit">
											<img :src="imgUrl(mainType==='pay'?data.buyerSubmit.talk:data.buyerSubmit.followGoods)" alt="" title=""/>
										</span>
                    <span v-if="data.buyerSubmit">
											<img :src="imgUrl(mainType==='pay'?data.buyerSubmit.pay:data.buyerSubmit.followShop)" alt="" title=""/>
										</span >
                    <span v-if="data.buyerSubmit">
											<img :src="imgUrl(data.buyerSubmit.cart)" alt="" title=""/>
										</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="task-step-box" :class="step<3?'no-step':''">
            <div class="border-color">3</div>
            <div class="task-step-new-left">

            </div>
            <div class="task-step-right">
              <div class="task-step-t">
								<span>
									<a>收货好评</a>
								</span>
              </div>
              <div class="task-step-l">
                <div class="task-step-Two">
                  <div class="step-Two-left">评价/物流截图</div>
                  <div class="step-Two-right">
										<span v-if="data.buyerSubmit&&data.buyerSubmit.expressPicture">
											<img :src="imgUrl(data.buyerSubmit.expressPicture)" alt="" title=""/>
										</span>
                    <span v-if="data.buyerSubmit&&data.buyerSubmit.goodsEvaluate">

											<img :src="imgUrl(data.buyerSubmit.goodsEvaluate)" alt="" title=""/>
										</span>
                    <span v-if="data.buyerSubmit&&data.buyerSubmit.expressEvaluate">
											<img :src="imgUrl(data.buyerSubmit.expressEvaluate)" alt="" title=""/>
										</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 3 -->
          <div class="task-step-box" :class="step<4?'no-step':''">
            <div class="border-color">4</div>
            <div class="task-step-new-left">

            </div>
            <div class="task-step-right">
              <div class="task-step-t">
								<span>
									<a>商家确认订单</a>
								</span>
              </div>
              <div class="task-step-l">
                <ul>
                  <li>
                    <a>返款方式</a>
                    <a>平台系统返款</a>
                  </li>
                  <li>
                    <a>返款账号</a>
                    <a>本金账户</a>
                  </li>
                  <li>
                    <a>返款金额</a>
                    <a>{{data.goodsMoneySum}}</a>
                  </li>
                  <li>
                    <a>平台规定提交评价后商家24小时内操作返款</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!-- 4 -->
          <div class="task-step-box" :class="step<5?'no-step':''">
            <div class="border-color">5</div>
            <div class="task-step-new-left">

            </div>
            <div class="task-step-right">
              <div class="task-step-t">
								<span>
									<a>任务完成</a>
								</span>
              </div>
              <div class="task-step-l">
                <span><a>获得佣金</a></span>
                <span class="span-color">
									<a>获得：</a>
									<a>{{data.baseMoney}}</a>
									<a>金</a>
								</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- fixed -->
    <div class="fixed-nav">
      <index-footer></index-footer>
    </div>
  </div>
</template>

<script>
  import {taskService} from '#/service'
  import IndexFooter from '@/components/base/IndexFooter'
  import baseMixins from '../../mixins/base'
  import IMGScale from '@/components/base/IMGScale'
  export default{
    name:'taskLook',
    data(){
      return {
        type:70,
        id:'',
        data:{},
        mainType:""
      }

    },
    created(){
      this.id=this.$route.params.id;
      if(!this.id){
        return this.$router.push({
          name:'orderDetails',
          query:{
            type:70
          }
        })
      }
      taskService.task({
        method:'get',
        url:'/buyertask/buyer_task/'+this.id,
        success:(res)=>{
          this.data=res.data
          this.mainType=res.data.mainType
        }
      })
    },
    computed:{
      step(){
        let status=1
        if(this.data.status===70){
          return 5
        }
        if(this.data.buyerSubmit){
          if(this.data.buyerSubmit.result){
            status=2
          }
          if(this.data.buyerSubmit.expressPicture){
            status=3
          }

        }
        return status
      },
      typeString(){
        switch (this.data.taskkeyType*1) {
          case 1:
            return '普通任务'
          case 2:
            return '指定关键词任务'
          case 3:
            return '指定图片任务'
          case 4:
            return '指定文字任务'
        }
      }
    },
    mixins:[baseMixins],
    components: {
      IndexFooter,
      IMGScale
    }
  }
</script>

<style lang="less">
  /* 步骤4 */
  .task-step-l span{
    display: block;
    float:left;
  }
  .task-step-l span:last-child{
    float: right;
  }
  .no-step{
    .task-step-new-left{
      background: rgb(247,247,249);
    }
    .border-color{
      color: black;
      background: rgb(247,247,249);
    }
  }
  .task-step-l span a{
    display: inline-block;
    float:left;
    color: #777;
    font-size: 0.12rem;
  }
  .task-step-l .span-color a{
    color: #0c92f3;
  }
  /* 步骤2 */
  .task-step-Two{
    width: 100%;
    height: auto;
    overflow: hidden;
  }
  .step-Two-left{
    float:left;
    line-height: 0.43rem;
    color: #777;
    font-size: 0.12rem;
  }
  .step-Two-right{
    float:right;
    margin-top: 0.05rem;
  }
  .step-Two-right span{
    display: block;
    float: left;
    width: 0.32rem;
    height: 0.32rem;
    margin-right: 0.05rem;
  }
  .step-Two-right span:last-child{
    margin-right: inherit;
  }
  .step-Two-right span img{
    display: block;
    width:100%;
    height: 100%;
  }
  /* 步骤1 */
  .task-step-t{
    width: 100%;
    height: 0.12rem;
    line-height: 0.12rem;
    padding: 0.15rem 0;
  }
  .task-step-t span{
    display: block;
    float:left;
  }
  .task-step-t span a{
    display: inline-block;
    float:left;
    color: #333;
    font-size: 0.12rem;
  }
  .task-step-l{
    width: 100%;
    height: auto;
  }
  .task-step-l ul li{
    width: 100%;
    height: 0.3rem;
    line-height: 0.3rem;
  }
  .task-step-l ul li a{
    display: inline-block;
    float:left;
    color: #777;
    font-size: 0.12rem;
  }
  .task-step-l ul li a:last-child{
    float: right;
  }






  .task-look-main{
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding-bottom: 0.5rem;
  }
  .task-shop-msg{
    width: 100%;
    height: 1.26rem;
    background: white;
  }
  .shop-msg-box{
    width: 94%;
    margin: 0 auto;
  }
  .shop-msg-title{
    width: 100%;
    height: 0.36rem;
    line-height: 0.36rem;
    color: #7d7d7d;
    font-size: 0.12rem;
  }
  .shop-msg-img{
    width: 100%;
    height: 0.9rem;
  }
  .msg-img{
    width: 0.8rem;
    height: 0.8rem;
    float: left;
  }
  .msg-img img{
    display: block;
    width: 100%;
    height: 100%;
  }
  .msg-money{
    width: 2.5rem;
    float: left;
    margin:0.05rem 0 0 0.1rem;
  }
  .msg-money span{
    width: 100%;
    display: block;
    float:left;
    margin-bottom: 0.1rem;
  }
  .msg-money span a{
    display: inline-block;
    float: left;
    color: #7d7d7d;
    font-size: 0.12rem;
  }
  .msg-money span a:last-child{
    color: #4097ff;
  }
  .task-state{
    width: 100%;
    height: 0.86rem;
    background: white;
    margin-top: 0.1rem;
  }
  .task-state-box{
    width: 100%;
    height: 0.47rem;
    line-height: 0.47rem;
    border-bottom: 0.01rem solid #e6e6e6;
  }
  .task-state-box span{
    display: inline-block;
    float: left;
  }
  .task-state-box span a{
    display: block;
    float: left;
    color: #333;
    font-size: 0.13rem;
  }
  .task-state-box span a:first-child{
    width: 0.16rem;
    height: 0.16rem;
    margin: 0.15rem 0.05rem 0 0;
  }
  .task-state-box span a:first-child img{
    width: 100%;
    display: block;
  }
  .task-state-box span:last-child{
    float:right;
    color: #4097fe;
    font-size: 0.13rem;
  }
  .task-hint{
    width: 100%;
    height: 0.37rem;
    line-height: 0.37rem;
    color: #eb0507;
    font-size: 0.12rem;
  }
  .task-step{
    width: 100%;
    float: left;
    height: auto;
    background: white;
    margin-top: 0.1rem;
  }
  .task-step-left{
    float:left;
    height: auto;
    width: 0.24rem;
    margin-top: 0.1rem;
  }
  .task-step-right{
    float: left;
    width: 3rem;
    margin-left: 0.2rem;
  }
  .task-step-box{
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .task-step-auto{
    width:94%;
    margin: 0 auto;
  }
  .task-step-new-left{
    height:100%;
    width: 0.02rem;
    margin-left: 0.11rem;
    overflow:hidden;
    background: #4097FE;
    padding-bottom:9999px;
    margin-bottom:-9999px;
    float:left;
    position: relative;
  }
  .task-step-right{
    width:3.1rem;
    float:left;
    height:auto;
    margin: -0.3rem 0 0 0.4rem;
  }
  .border-color{
    width: 0.24rem;
    height: 0.24rem;
    color: white;
    text-align: center;
    font-size: 0.12rem;
    line-height: 0.24rem;
    border-radius: 50%;
    background: #4097FE;
  }
</style>
